<template>
    <div class="user-box">
        <template>
            <el-row class=" box-flex">
                <el-col :span="6" class="box-flex m-l-10">
                    <span class="w-span">商家名称</span>
                    <el-input placeholder="请输入内容" v-model="merName" clearable></el-input>
                </el-col>
                <el-col :span="6" class="box-flex m-l-10">
                    <span class="w-span">商家联系人</span>
                    <el-input placeholder="请输入内容" v-model="merContact" clearable></el-input>
                </el-col>
                <el-col :span="4" class="m-l-10">
                    <el-button type="primary" @click="search(1)">筛选</el-button>
                    <el-button type="primary" @click="search(2)">重置</el-button>
                </el-col>
            </el-row>
            <el-row class="p-all-20 box-flex ">
                <el-col :span="4" class="m-l-10">
                    <el-button type="success" @click="setNewMerchant">新建商家</el-button>
                </el-col>
            </el-row>
            <div class="tab-box">
                <el-table :data="merchantList">
                    <el-table-column label="商家编号" width="120">
                        <template slot-scope="scope">{{ scope.row.merchantCode }}</template>
                    </el-table-column>
                    <el-table-column prop="merchantName" label="商家名称" width="120"></el-table-column>
                    <el-table-column prop="merchantType" label="商家类型" width="120">
                        <template slot-scope="scope">
                            <span v-if="scope.row.merchantType=='PERSON'">个体</span>
                            <span v-else>企业</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="contactName" label="联系人" width="120"></el-table-column>
                    <el-table-column prop="miniAppsEntrance" label="小程序" width="120">
                        <template slot-scope="scope">
                            <span v-if="scope.row.miniAppsEntrance">已开通</span>
                            <span v-else style='color:red'>未开通</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="h5Entrance" label="H5" width="120">
                        <template slot-scope="scope">
                            <span v-if="scope.row.h5Entrance">已开通</span>
                            <span v-else style='color:red'>未开通</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="endTime" label="服务到期时间" width="200"></el-table-column>
                    <el-table-column label="操作" align="left">
                        <template slot-scope="scope">
                            <el-button @click="toAdminEditer(scope.$index,scope.row)" size='mini' type="primary">编辑配置</el-button>
                            <el-button size='mini' type="primary" @click="dialogTableFn(scope.row)">记录</el-button>
                            <el-button size='mini' type="primary" @click="resetPassWord(scope.row)">密码重置</el-button>
                            <el-button @click="toDeleteAdmin(scope.row, scope.$index)" size='mini' type="danger">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <current-page :current-page="currentPage" :page-size="pageSize" :page-total="pageTotal" @handleCurrentChange="handleCurrentChange"></current-page>
            <el-dialog title="商家名称" center :visible.sync="dialogTableVisible">
                <el-table :data="gridData">
                    <el-table-column property="adminName" label="操员" width="150"></el-table-column>
                    <el-table-column property="modify" label="更改详情" width="200"></el-table-column>
                    <el-table-column property="createTime" label="修改时间"></el-table-column>
                </el-table>
				<div class="page-box">
					<span>共{{logPageTotal}}条</span>
					<current-page :current-page="logPage" :page-size="logPageSize" :page-total="logPageTotal" @handleCurrentChange="handleTabChange"></current-page>
				</div>
            </el-dialog>
			<el-dialog  :title="merTitle+'   密码重置'" center :visible.sync="passDialog" width="30%">
				<el-row class="p-all-20 " >
					<el-col :span="100" class="box-flex m-b-10">
						<span class="sp-w-50 m-r-10">新密码</span>
						<el-input  v-model="password" type="password"/>
					</el-col>
				</el-row>
				<el-row class="p-all-20 ">
					<el-col :span="100" class="box-flex m-b-10">
						<span class="sp-w-50 m-r-10">重复密码</span>
						<el-input v-model="serPassword" type="password"/>
					</el-col>
				</el-row>
				<span slot="footer" class="dialog-footer">
					<el-button @click="passDialog = false">取 消</el-button>
					<el-button type="primary" @click="saveAdmin">确 定</el-button>
				</span>
			</el-dialog>

			
        </template>
    </div>
</template>

<script>
    import currentPage from '@/components/current-page/current-page.vue'
    import {
        SUCCESS_REQUEST_STATUS
    } from '@/utils/config.js'

    export default {

        data() {
            return {
				password: '',
				serPassword: '',
                merName: '',
				passDialog: false,
                merContact: '',
				logPage: 0,
				merTitle: '',
				logPageSize: 5,
				logPageTotal: 0,
				gridData: [],
				merId:'',
                merchantList: [], // 商家列表 wx99cf89167ec37c8b
                pageSize: 10, // 页码
                currentPage: 0, // 当前页
                pageTotal: 0, // 总页数
                centerDialogVisible: false, // 是否显示弹窗
                dialogTableVisible: false
            }
        },
        created() {
            this._initData()
        },
        methods: {
			saveAdmin() {
				let attr = !this.password ? '密码不能为空': !this.serPassword ? '重复密码不能为空' : this.password != this.serPassword ? '两次密码不一致' : ''
				if(attr) {
					this.$message({
						message: attr,
						type: 'warning'
					})
					return
				}
				this.$ajax({
					api: 'merchant/resetpassword',
					params: {
						merchantId: this.merId,
						newPassWord: this.serPassword
					}
				}).then(res => {
					if(res.status == SUCCESS_REQUEST_STATUS) {
						this.$message({
							message: '重置成功',
							type: 'success'
						})
						this.passDialog = false;
					}
				}).catch(err => {
					this.$message({
						message: err.message,
						type: 'warning'
					})
				})
			},
			
            dialogTableFn(item = null) {
				if(item){
					this.merId = item.merchantId
				}
				
				this.$ajax({
					api: 'merchant/loglist',
					params: {
						page: this.logPage,
						pageSize: this.logPageSize,
						merchantId: item ? item.merchantId : this.merId
					}
				}).then(res => {
					console.log(res)
					if(res.status === SUCCESS_REQUEST_STATUS ){
						if(res.data.logList.length> 0){
							this.gridData = res.data.logList
							this.logPageTotal = res.data.page.total
							this.dialogTableVisible = true

						}else{
							this.$message({
								message: '暂无记录',
								type: 'warning'
							})
							//this.dialogTableVisible = true
						}
					}
					
				}).catch(err => {
					alert(err.message)
					this.$message({
						message: err.message,
						type: 'warning'
					});
				})
            },
            resetPassWord(item) {
				this.merTitle = item.merchantName
				this.merId = item.merchantId
				this.passDialog = true
            },
            toDeleteAdmin(item, index) {
                this.$confirm("确定删除" + item.companyName + "?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.$ajax({
                        api: 'merchant/delete',
                        params: {
                            merchantId: item.merchantId
                        }
                    }).then(res => {
                        if (res.status === SUCCESS_REQUEST_STATUS) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.merchantList.splice(index, 1)
                        }
                    }).catch((err) => {
                        console.log(err)

                        this.$message({
                            message: err.message,
                            type: 'warning'
                        });
                    })
                })
                this.$ajax({
                    api: 'merchant/delete',
                    params: {
                        merchantId: item.merchantId
                    }
                })
            },
            search(num) {
                if (num == 2) {
                    this.merName = this.merContact = ''
                }
                this.currentPage = 0
                this._initData()
            },
            // 新建商家
            setNewMerchant() {
                this.$emit('setNewMerchant')
            },
            // 修改商家信息
            toAdminEditer(index, item) {
                this.$emit('setNewMerchant', item)
            },
            _initData() {
                this.$ajax({
                    api: 'merchant/list',
                    params: {
                        merchantName: this.merName.trim(),
                        contactName: this.merContact.trim(),
                        pageSize: this.pageSize,
                        page: this.currentPage
                    }
                }).then(res => {
                    if (res.status === SUCCESS_REQUEST_STATUS) {
                        console.log(res)
                        this.merchantList = res.data.merchantList
                        this.pageTotal = res.data.page.total
                    }
                })
            },
            handleCurrentChange(page) {
                this.currentPage = page
                this._initData()
            },
			handleTabChange(page) {
				this.logPage = page
				this.dialogTableFn()
			},
            open4() {
                const h = this.$createElement;
                this.$msgbox({
                    title: '消息',
                    message: h('p', null, [
                        h('span', null, '内容可以是 '),
                        h('i', {
                            style: 'color: teal'
                        }, 'VNode')
                    ]),
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            setTimeout(() => {
                                done();
                                setTimeout(() => {
                                    instance.confirmButtonLoading = false;
                                }, 300);
                            }, 3000);
                        } else {
                            done();
                        }
                    }
                }).then(action => {
                    this.$message({
                        type: 'info',
                        message: 'action: ' + action
                    });
                });
            }
        },
        components: {
            currentPage
        }

    }
</script>

<style>
	.page-box{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.sp-w-50{
		width: 100px;
	}
    .user-box {
        width: 100%;
        max-width: 100%;
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow-x: auto;
    }

    .tab-box {
        width: 100%;
        height: 670px;
        flex: 1;
        overflow: auto;
    }

    .box-flex {
        display: flex;
        margin-bottom: 20px;
    }

    .w-span {
        min-width: 100px;
        line-height: 40px;
        display: inline-block;
    }
</style>
